<template>
  <div>
    <div class="lsRadioButtonBarBox ls-panel">
      <div class="ls-flex lsRadioButtonBar">
        <div v-for="item in buttons" :key="item.name" class="ls-text-hover lsRadioButtonBarText"
             :class="{selected:item.selected}" @click="selectButton(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <transition enter-active-class="animate__animated animate__fadeInRight animate__faster"
                leave-active-class="animate__animated animate__fadeOutRight animate__faster" mode="out-in">
      <slot></slot>
    </transition>
  </div>
</template>

<script>
import LsRadioButtonPanel from "./lsRadioButtonPanel";

export default LsRadioButtonPanel;
</script>

<style>
.lsRadioButtonBarBox {
  position: absolute;
  right: 0.5em;
  top: 0.5em
}

.lsRadioButtonBar > div {
  border-right: var(--el-border);
  padding: 0.5em
}

.lsRadioButtonBar > div:last-child {
  border-right: none;
}

.lsRadioButtonBarText.selected {
  color: #66B1FF;
}

.lsRadioButtonBarText.selected:hover {
  color: var(--el-color-primary);
}
</style>
